<template>
  <div class="plan">
    <div class="cardTitle flexBetween padding5-10 fontSize18 fontWeight">
      <div class="titleName">应急预案浏览排名</div>
      <a @click="goRouter" style="color: #fff; text-decoration: none;">更多<i class="el-icon-d-arrow-right" color="#fff"></i></a>
    </div>
    <div class="planTable">
      <el-table border :header-cell-style="{ background: 'rgba(2,167,240,0.25)', color: '#fff',borderColor:'rgba(2,167,240,0.25)','text-align':'center'}" :cell-style="{ color: '#fff',borderColor:'rgba(2,167,240,0.25)'}" :style="{borderColor:'rgba(2,167,240,0.25)','font-size':'16px'}" :data="tableData" :default-sort="{prop: 'views', order: 'descending'}" height="100%">
        <el-table-column label="排名" type="index" align="center" width="80px">
        </el-table-column>
        <el-table-column prop="serialName" label="文件名称" align="left " min-width="200px">
          <template slot-scope="scope">
            <div>
              <a href="javascript:;" style="color:#fff;cursor:pointer;text-decoration:underline" @click="goPlanList(scope.row.id)"> {{ scope.row.serialName }}</a>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="releaseUnitName" label="发布单位" align="center" min-width="120px">
        </el-table-column>
        <el-table-column prop="views" label="浏览量" align="center">
        </el-table-column>
        <el-table-column prop="download" label="下载量" align="center">
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>
<script>
import { getViewsApi } from "@/api/EmengercyPlan/homepagecontent";

export default {
  name: "Plan",
  components: {

  },
  data() {
    return {
      tableData: [
        /* {
        serialName: "突发事件整体应急预案",
        releaseUnitName: "武汉",
        views: "571",
        download: "129"
      }, {
        serialName: "雨雪冷冻灾害应急预案",
        releaseUnitName: "黄石",
        views: "311",
        download: "63"
      }, {
        serialName: "强对流天气灾害应急预案",
        releaseUnitName: "随州",
        views: "499",
        download: "82"
      } */
      ]
    };
  },
  mounted() {
    this.getView();
  },
  methods: {
    // 列表
    getView() {
      getViewsApi({}).then(res => {
        console.log("预案浏览排名", res);
        this.tableData = res;
      });
    },
    // 打开预案详情
    goPlanList(id) {
      sessionStorage.setItem("id", JSON.stringify(id));
      this.$router.push({
        name: "PlanManagementDetail",
        query: {
          id
        }
      });
    },
    // 跳转预案管理列表
    goRouter(name) {
      this.$router.push({
        name: "PlanManagement"
      });
    }
  }
};
</script>
<style scoped lang="less">
.plan {
  height: 100%;
  border: 1px solid #0649d7;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cardTitle {
  background-color: #265cff;
}
.planTable {
  padding: 10px;
  flex:1;

  // 最外层透明
  /deep/ .el-table,
  /deep/ .el-table__expanded-cell {
    background-color: transparent;
  }
  //表格内背景颜色
  /deep/ .el-table th,
  /deep/ .el-table tr,
  /deep/ .el-table td {
    background-color: transparent;
  }

  //去除表格白色横线
  .el-table--border::after,
  .el-table--group::after,
  .el-table::before {
    background-color: transparent;
  }
  /deep/ .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
    background-color: transparent;
  }
  /*  :deep(div::-webkit-scrollbar-track) {
    border-radius: 0;
    background: transparent;
  } */
}
</style>
